<?php
use yii\helpers\Url;
use yii\widgets\ActiveForm;
use yii\helpers\Html;
?>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" href="images/icon.png">
    <title>注册</title>
    <link href="/styles/reset.css" rel="stylesheet" type="text/css">
    <link href="/styles/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="/styles/register.css" rel="stylesheet" type="text/css">
</head>
<body>
<html>
<head></head>
<div class="total rows">
    <div class="regiPart">
        <div class="container">
            <div class="col-lg-6 col-lg-offset-3 mainPart">
                <div class="regiIcon">
                    <img src="/images/myHair.png" alt="好头发" />
                </div>
                <div class="regiTextBox col-lg-12">
                    <div class="col-lg-8 col-lg-offset-2">
                        <?php $form = ActiveForm::begin(['id' => 'regiForm','options' => ['class' => 'regiForm']]); ?>
                        <fieldset>
                            <p class="legend">欢迎加入我的发</p>

                                <?= $form->field($model, 'username')->textInput()->label(false)->textInput(['placeholder' => '手机号']) ?>
                            
<!--                            <p><input id="ceilVerifyCodeBtn" type="button" value="获取手机验证码" /></p>-->
<!--                            <p><input id="ceilVerifyCode" name="ceilVerifyCode" placeholder="手机验证码" /></p>-->

                            <?= $form->field($model, 'nic_name')->textInput()->label(false)->textInput(['placeholder' => '昵称']) ?>
                            <?= $form->field($model, 'password')->passwordInput()->label(false)->textInput(['placeholder' => '密码']) ?>

                            <?= $form->field($model,'code',['options'=>['class'=>''],'template'=>'{input}'])->widget(yii\captcha\Captcha::className(),[
                                'options' => ['class'=>'col-lg-8','placeholder' => '验证码','id' => 'verifyCode'],
                                'template' => '{input}{image}',
                                'imageOptions' => ['class'=>'col-lg-3','id'=>'VerifyCodeIcon']
                            ])->label(false)?>

                            <?= Html::submitButton('注册', ['id' => 'registerBtn']) ?>

                            <p class="service">点击注册表示同意我的发<a href="#">《服务条款》</a></p>
                        </fieldset>
                        <?php ActiveForm::end(); ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-right">
        已有账号?
        <a href="<?=Url::toRoute('site/login')?>">登录</a>
    </div>
    <div class="logTextBox" >
        <form class="logForm" id="logForm" method="get" action="#">
            <fieldset>
                <p class="legend">欢迎登录我的发</p>
                <p><input id="logPhone" class="phone" name="phone" placeholder="手机号" /></p>
                <p><input id="logPassword" class="password" name="password" type="password" placeholder="密码" /></p>
                <p class="autoLogin"><input id="autoLogin" type="checkbox" value="登录" /><span class="autoLoginLeft">自动登录</span><span class="autoLoginRight"><a href="#">忘记密码？</a></span></p>
                <p><input id="loginBtn" type="submit" value="登录" /></p>
                <p class="noAccount">还没有账号？<a href="#">现在注册</a></p>
            </fieldset>
        </form>
    </div>
</div>
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery.validate.js"></script>
<script>
    $(document).ready(function(){
        $(".text-right").hover(function(){
                $(".logTextBox").addClass("show")
            }
        );
        $(".regiPart").click(function(){
            $(".logTextBox").removeClass("show")
        });

        $.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");

        $("#regiForm").validate({
            rules : {
                regiPhone:{
                    number:true,
                    required : true,
                    minlength : 11,
                    // 自定义方法：校验手机号在数据库中是否存在
                    // checkPhoneExist : true,
                    isMobile : true
                },
//                verifyCode:{
//                    number:true,
//                    length : 4,
//                    required : true
//                },
//                ceilVerifyCode:{
//                    number:true,
//                    length : 4,
//                    required : true
//                },
//                username:{
//                    required : true
//                },
//                phone : {
//                    number:true,
//                    required : true,
//                    minlength : 11,
//                    // 自定义方法：校验手机号在数据库中是否存在
//                    // checkPhoneExist : true,
//                    isMobile : true
//                },
//                regiPassword : {
//                    required : true
//                }
            },
            messages : {
                regiPhone : {
                    number:"请输入手机号",
                    required : "请输入手机号",
                    minlength : "确认手机不能小于11个字符",
                    isMobile : "请正确填写您的手机号码"
                },
//                verifyCode:{
//                    required : "验证码错误",
//                    number:"验证码错误",
//                    length : "验证码错误"
//                },
//                ceilVerifyCode:{
//                    required : "手机验证码错误",
//                    number:"手机验证码错误",
//                    length : "手机验证码错误"
//                },
//                username:{
//                    required : "昵称不能为空"
//                },
//                regiPassword : {
//                    required : "密码不能为空",
//                }
            },
            errorElement: "em", //可以用其他标签，记住把样式也对应修改
            success: function(lable) {
                //label指向上面那个错误提示信息标签em
                lable.text(" ")     //清空错误提示消息
                    .addClass("success");  //加上自定义的success

            },
            errorPlacement: function(error, element) {
                if(element.is(":input"))
                    error.appendTo(element.parent());

            }
        });

        $("#logForm").validate({
            rules : {
                phone : {
                    number:true,
                    required : true,
                    minlength : 11,
                    // 自定义方法：校验手机号在数据库中是否存在
                    // checkPhoneExist : true,
                    isMobile : true
                },
                password : {
                    required : true
                }
            },
            messages : {
                phone : {
                    number:"请输入手机号",
                    required : "请输入手机号",
                    minlength : "确认手机不能小于11个字符",
                    isMobile : "请正确填写您的手机号码"
                },
                password : {
                    required : "密码不能为空",
                }
            },
            errorElement: "em", //可以用其他标签，记住把样式也对应修改
            success: function(lable) {
                //label指向上面那个错误提示信息标签em
                lable.text(" ")       //清空错误提示消息
                    .addClass("success");  //加上自定义的success

            }
        });
    });
</script>
</body>
</html>